<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="输入搜索：">
            <el-input
              style="width: 203px"
              v-model="listQuery.keyword"
              placeholder="商品名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="图书ISBN：">
            <el-input
              style="width: 203px"
              v-model="listQuery.productSn"
              placeholder="商品货号"
            ></el-input>
          </el-form-item>
          <el-form-item label="商品分类：">
            <el-cascader
              v-model="className"
              :options="productCateOptions"
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="上架状态：">
            <el-select
              v-model="listQuery.publishStatus"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in publishStatusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" @click="handleAddProduct()" size="mini">
        添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table
        ref="productTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column label="编号" width="130" align="center">
          <template slot-scope="scope">{{ scope.row.isbn }}</template>
        </el-table-column>
        <el-table-column label="商品图片" width="120" align="center">
          <template slot-scope="scope"
            ><img
              style="height: 80px"
              :src=" scope.row.img"
          /></template>
        </el-table-column>
        <el-table-column label="图书名称" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.title }}</p>
            <p>{{ scope.row.brandName }}</p>
          </template>
        </el-table-column>
        <el-table-column label="作者" width="130" align="center">
          <template slot-scope="scope">{{ scope.row.author }}</template>
        </el-table-column>
        <el-table-column label="价格/货号" width="130" align="center">
          <template slot-scope="scope">
            <p>价格：￥{{ scope.row.price }}</p>
            <p>货号：{{ scope.row.douban }}</p>
          </template>
        </el-table-column>
        <el-table-column label="标签" width="140" align="center">
          <template slot-scope="scope">
            <p>
              上架：
              <el-switch
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.status"
                @change="handleChangeStatus(scope.row)"
              >
              </el-switch>
            </p>
            <p>
              新品：
              <el-switch
                @change="handleNewStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.newStatus"
              >
              </el-switch>
            </p>
            <p>
              推荐：
              <el-switch
                @change="handleRecommendStatusChange(scope.$index, scope.row)"
                :active-value="1"
                :inactive-value="0"
                v-model="scope.row.recommandStatus"
              >
              </el-switch>
            </p>
          </template>
        </el-table-column>

        <el-table-column label="SKU库存" width="120" align="center">
          <template slot-scope="scope">
             
            <span>{{ scope.row.inventory }}</span> <el-button @click='SKUnum(scope.row)' type="primary" icon="el-icon-edit"  size="mini" circle></el-button>
          </template>
        </el-table-column>
        <el-table-column label="销量" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.sale }}</template>
        </el-table-column>
        <!-- <el-table-column label="审核状态" width="100" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.verifyStatus | verifyStatusFilter }}</p>
            <p>
              <el-button
                type="text"
                @click="handleShowVerifyDetail(scope.$index, scope.row)"
                >审核详情
              </el-button>
            </p>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="handleShowProduct(scope.$index, scope.row)"
                >查看
              </el-button>
              <el-button
                size="mini"
                @click="handleUpdateProduct(scope.$index, scope.row)"
                >编辑
              </el-button>
            </p>
            <p>
              <el-button
                size="mini"
                @click="handleShowLog(scope.$index, scope.row)"
                >日志
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="batch-operate-container">
      <el-select size="small" v-model="operateType" placeholder="批量操作">
        <el-option
          v-for="item in operates"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        style="margin-left: 20px"
        class="search-button"
        @click="handleBatchOperate()"
        type="primary"
        size="small"
        :loading="btn_up"
      >
        确定
      </el-button>
    </div>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     
      :layout="width > 1100 ? 'total, sizes, prev, pager, next, jumper' : 'total, prev, pager, next'"
      :page-sizes="[5, 10, 15]"
     pager-count="2"
      :total="total"
    >
    </el-pagination>

  <el-dialog title="修改图书库存" :visible.sync="dialogFormVisible">
  <el-form label-position="right" :model="form">
    <el-form-item label="书名" >
      {{form.title}}
    </el-form-item>
    <el-form-item label="图书ISBN" >
      {{form.ISBN}}
    </el-form-item>
    <el-form-item label="SKU库存" >
         <el-input-number size='mini' v-model="form.num"  :min="1" :max="10000" label="描述文字"></el-input-number>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="SKUend" :loading="btn_SUK">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>
<script>
import {
  get_classifylist,
  get_booklist,
  get_book_by_isbn_db,
  get_book_by_filter,
  put_book,
  change_book_stock
} from "@/api/book";


export default {
  name: "productList",
  data() {
    return {
      width: 0,
      editSkuInfo: {
        dialogVisible: false,
        productId: null,
        productSn: "",
        productAttributeCategoryId: null,
        stockList: [],
        productAttr: [],
        keyword: null,
      },
      operates: [
        {
          label: "商品上架",
          value: "1",
        },
        {
          label: "商品下架",
          value: "0",
        },
        // {
        //   label: "设为推荐",
        //   value: "recommendOn",
        // },
        // {
        //   label: "取消推荐",
        //   value: "recommendOff",
        // },
        // {
        //   label: "设为新品",
        //   value: "newOn",
        // },
        // {
        //   label: "取消新品",
        //   value: "newOff",
        // },
        // {
        //   label: "转移到分类",
        //   value: "transferCategory",
        // },
        // {
        //   label: "移入回收站",
        //   value: "recycle",
        // },
      ],
      className: "",
      operateType: null,
      listQuery: {
        keyword: "",
        productSn: "",
        className: "",
        publishStatus: "",
      },
      form:{
        ISBN: "3423423",
        num:0,
        title:'hh',
        num_0:0
      },
      btn_SUK:false,
      btn_up:false,
      page:1,
      pageSize:10,
      list: [],
      total: null,
      dialogFormVisible: false,
      listLoading: false,
      selectProductCateValue: null,
      multipleSelection: [],
      productCateOptions: ["dd", "ff"],
      brandOptions: [],
      publishStatusOptions: [
        {
          value: 1,
          label: "上架",
        },
        {
          value: 0,
          label: "下架",
        },
      ],
      verifyStatusOptions: [
        {
          value: 1,
          label: "审核通过",
        },
        {
          value: 0,
          label: "未审核",
        },
      ],
      name: [],
      ifclass: [],
      isbn: [],
    };
  },
  //获取屏幕宽度
  mounted() {
    this.width = document.body.clientWidth;
  },
  methods: {
    handleResetSearch(){       //重置
      this.listQuery.keyword= "",
      this.listQuery.productSn= "",
      this.className= "",
      this.listQuery.publishStatus= ""
      // this.get_booklist(this.page, this.pageSize);
    
      

    },
    SKUnum(val){
      console.log(this.listQuery)
      this.dialogFormVisible=true;
      this.form.ISBN=val.bookId;
      this.form.title=val.title;
      this.form.num=val.inventory;
      this.form.num_0=val.inventory;
    },
    SKUend(){
       console.log(this.listQuery)
      console.log(this.form)
      this.btn_SUK=true;
      let params=new URLSearchParams();
      params.append('bookId',this.form.ISBN);
      params.append('newStock',this.form.num);

      change_book_stock(params).then(res=>{
        console.log(res)
         this.btn_SUK=false;
        this.dialogFormVisible=false;
        let str='<h4>';
        str+=this.form.title+'</h4>';
        str+='<h3>由库存为'+this.form.num_0+'更改为'+this.form.num+'</h3>';
         this.$notify({
          title: '更改图书库存成功',
          type: 'success',
           dangerouslyUseHTMLString: true,
          message: str
        });
       console.log(this.listQuery)
        this.get_booklist(this.page, this.pageSize);
      })
    
    },
    get_class() {
      let arr = [];
      get_classifylist().then((res) => {
        console.log(res);

        arr = res.data.data;
        this.productCateOptions = arr.map((res) => {
          return {
            label: res.classname,
            value: res.categoriesId,
            children: res.CategoriesList.map((res) => {
              return {
                label: res.classname,
                value: res.categoriesId,
              };
            }),
          };
        });
        console.log(this.productCateOptions);
      });
    },

    handleChange(value) {
    
      console.log(this.className);
      this.listQuery.className = value[1];
      // this.get_list()
    },
  async  get_booklist(a,b){
    this.listLoading=true
      let obj={
        page: a,
        pageSize: b,
        categoryId: this.listQuery.className,
        keywords: this.listQuery.keyword,
        isbn: this.listQuery.productSn,
        status: this.listQuery.publishStatus,
      }
    await  get_book_by_filter(obj).then((res) => {
        console.log( res.data.data.records);
        this.list = res.data.data.records;
        this.total = res.data.data.total;
        console.log(this.list);
        this.listLoading=false
      });
    },
     handleSearchList() {
      this.get_booklist(this.page,this.pageSize);
      
    },
       handleSizeChange(val) {
      console.log(val);
      this.pageSize = val;
      console.log(this.page, this.pageSize);
      this.get_booklist(this.page, this.pageSize);
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(this.page, this.pageSize);
     this.get_booklist(this.page, this.pageSize);
    },
    handleChangeStatus(val) {
      
      console.log(val.status);
      let arr=[];
      arr.push(val.bookId)
      let params = new URLSearchParams();
      let type=val.status=='1'?"0":"1"
      console.log(type)
      params.append("bookIds", arr);
      params.append("type",val.status);
      put_book(params).then((res) => {
        console.log(res);
        this.$message.success("操作成功");
        this.get_booklist(this.page, this.pageSize);
      });
    },
     handleSelectionChange(val) {
      this.multipleSelection = val;
    },
      handleBatchOperate() {
       
      if (this.multipleSelection == null || this.multipleSelection.length < 1) {
        this.$message({
          message: "请选择要操作的图书商品",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (this.operateType == 1) {
       
        console.log(this.multipleSelection);
        let list = [];
        let title = []
        console.log(this.multipleSelection);
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].status == 0) {
            list.push(this.multipleSelection[i].bookId);
            title.push(this.multipleSelection[i].title)
          }
        }
        if (list.length === 0) {
          this.$message({
            message: "选中图书中没有可以上架的图书",
            type: "warning",
            duration: 1000,
          });
          return;
        }else{
            console.log(list)
            this.btn_up=true;
          let params = new URLSearchParams();
          params.append("bookIds",list);
          params.append("type",1);
          put_book(params).then((res) => {
            let str='';
            title.forEach((item,index)=>{
              str+='<i>'+item+'</i></br>'
            })
            console.log(str)
            this.$notify({
          title: '成功批量上架以下书籍',
          
            type: 'success',
           
            // message: title.join("\t")
              dangerouslyUseHTMLString: true,
          message: str
        });
          this.btn_up=false;
            console.log(res);
             this.get_booklist(this.page, this.pageSize);
          });
        }
        
      } else if (this.operateType == 0) {
        //下架图书
         let list = [];
         let title = []
        console.log(this.multipleSelection);
        for (let i = 0; i < this.multipleSelection.length; i++) {
          if (this.multipleSelection[i].status == 1) {
            list.push(this.multipleSelection[i].bookId);
            title.push(this.multipleSelection[i].title)
          }
        }
        if (list.length === 0) {
          this.$message({
            message: "选中图书中没有可以上架的图书",
            type: "warning",
            duration: 1000,
          });
          return;
        }else{
          this.btn_up=true;
            console.log(list)
          let params = new URLSearchParams();
          params.append("bookIds",list);
          params.append("type",0);
          put_book(params).then((res) => {
           let str='';
            title.forEach((item,index)=>{
              str+='<i>'+item+'</i></br>'
            })
            console.log(str)
            this.$notify({
          title: '成功批量下架以下书籍',
          
            type: 'success',
           
            // message: title.join("\t")
              dangerouslyUseHTMLString: true,
          message: str
        });
        this.btn_up=false;
            console.log(res);
             this.get_booklist(this.page, this.pageSize);
          });
        }
      } 
    },

  },
  created() {
    this.get_booklist(1, 10);
    this.get_class();
  },
};
</script>
<style scoped>
.batch-operate-container {
  margin-top: 20px;
  float: left;
}
.el-pagination {
  margin-top: 20px;

  float: right;
  
}
</style>

Add a slogan or tagline
